<template>
    <!-- <view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">

    </view> -->
    <!-- class="cu-dialo" basis-xl -->
        <view style="width: 100%;" class="wrap" >
            <view class="cu-modal-slot">
                <view class="cu-modal-header">筛选</view>
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">工程编码</view>
                    <view>
                        <u-input v-model="query.projectno" :type="type" :border="border" placeholder="请输入" />
                    </view>
                </view>
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">工程名称</view>
                    <view>
                        <u-input v-model="query.projectname" :type="type" :border="border" placeholder="请输入" />
                    </view>
                </view>
            
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">申请主体</view>
                    <view>
                        <u-input v-model="query.applybodyname" :type="type" :border="border" placeholder="请输入" />
                    </view>
                </view>
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">项目负责人</view>
                    <view>
                        <u-input v-model="query.pmZoneLeaderUserUserName" :type="type" :border="border" placeholder="请输入" />
                    </view>
                </view>
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">承包商</view>
                    <view>
                        <u-input v-model="query.pmZonePmContractorName" :type="type" :border="border" placeholder="请输入" />
                    </view>
                </view>
                <view class="cu-modal-search">
                    <view class="cu-modal-search-title">工程状态</view>
                    <view class="flex flex-wrap justify-around">
                        <view class="button" v-for="(item,index) in dictList" :key="index" @click="getStateValue(item.dictValue)"
                         :style="{ backgroundColor: item.dictValue == query.projStatus ? '#3e97b0' : '',color: item.dictValue == query.projStatus ? '#fff' : '' }"
                        >{{ item.dictLabel }}</view>
                    </view>
                </view>
                
            </view>
            <!--  -->
            <view class=" flex cu-bar tabbar bg-white foot cu-modal-footer">
                    <!-- round -->
                <button class="cu-btn  lines-red lg " @click="hideModal">重置</button>
                <button class="cu-btn  bg-confirm lg margin-left " @click="confirmDialog">确定</button>
            </view>
        </view>
</template>
<script>

export default {
name: 'customDialog',
props: {
    modalName:{
        type: String,
        default: null
    },
    // dictList:{
    //     type: Array,
    //     default: []
    // },
},
data() {
    return{
      type: 'text',
              border: true,
      query:{
        projectno:'',
        projectname:'',
        pmZonePmContractorName:'',
        pmZoneLeaderUserUserName:'',
        applybodyname:'',
        projStatus:''
       },
       dictList:[]
    }
},
created() {
    console.log(this.dictList);

},
onLoad(){
    this.getDictList()
    console.log(this.query,'this.query===onLoad')
},
methods: {
    getDictList() {
      this.$u.api.dictListData({ dictType: "zf_proj_status" }).then((res) => {
        this.dictList = res;
      });
    },

    hideModal() {
        this.query.projectno = ''
        this.query.projectname = ''
        // this.projStatus = 0
        this.query.projStatus = 0
        // this.$emit('getModalName',{
        //   modalName: null,
        //   query: { 
        //     projectname: '',
        //     projStatus: 0,
        //     projectno: '',
        //   }
        // })
        this.query.pmZonePmContractorName = ''
        this.query.pmZoneLeaderUserUserName = ''
		this.query.pageNo = 1
        // console.log(this.query,'this.query===hideModal')
        // let pages = getCurrentPages();
        // let prevPage = pages[pages.length - 2];
        // prevPage.$vm.getValue(this.query);
        uni.$emit('someEvent',this.query);
        uni.navigateBack({
          delta: 1,
        })
        // 显示tabbar
        uni.showTabBar();
    },
    confirmDialog(){
        if(!this.query.projStatus){
          this.query.projStatus = 0
        }
        // let pages = getCurrentPages();
        // let prevPage = pages[pages.length - 2];
        // console.log(this.query,'this.query===confirmDialog')
        // prevPage.$vm.getValues(this.query);
		this.query.pageNo = 1
        uni.$emit('someEvent',this.query);
        uni.navigateBack({
          delta: 1,
        })
        // 显示tabbar
        uni.showTabBar();
    },
    getStateValue(item){
      this.query.projStatus = item;
      this.$forceUpdate();
    },
}
}
</script>
<style scoped lang="scss">
.cu-modal-slot {
margin: 42rpx 32rpx 20rpx 32rpx;
height: 100vh;
position: relative;
}
.cu-modal-header {
font-size: 38rpx;
color: #3d3d3d;
line-height: 40rpx;
text-align: left;
font-weight: 500;
}
.button {
    font-size: 32rpx;
    color: #666666;
    line-height: 40rpx;
    padding: 12rpx 40rpx;
    margin-bottom: 20rpx;
    background: #e2e2e2;
    border-radius: 180rpx;
}
.button:hover {
    background: #3e97b0;
    color: #ffffff;
}
.cu-modal-search-title {
margin: 32rpx 0rpx 20rpx 0rpx;
text-align: left;
font-size: 32rpx;
color: #999999;
line-height: 40rpx;
}
.cu-dialog {
background: #ffffff;
}
.cu-modal-footer {
padding: 32rpx 32rpx;
width: 100%;
.cu-btn {
width: 50%;
}
}
.bg-confirm {
background: #3e97b0;
color: #ffffff;
}
</style>